<template>
  <div class="app-container">
    <el-button type="primary" @click="add(1)">新增标签</el-button>

    <!-- table -->
    <div class="table">
      <el-table :data="tagdata" border style="width: 100%">
        <el-table-column prop="tagName" label="标签名" />
        <el-table-column prop="bgColor" label="背景色" align="center">
          <template  slot-scope="scope" >
            <span class="label" :style="{background:scope.row.bgColor}"></span>
          </template>
        </el-table-column>
        <el-table-column prop="textColor" label="文字色" align="center">
          <template  slot-scope="scope" >
            <span class="label" :style="{background:scope.row.textColor}"></span>
          </template>
        </el-table-column>
        <el-table-column prop="fontSize" label="文字大小" align="center" />
        <el-table-column label="预览效果" align="center">
          <template  slot-scope="scope" >
            <span class="label" :style="{color:scope.row.textColor,background:scope.row.bgColor,fontSize:scope.row.fontSize + 'px'}">{{scope.row.tagName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column prop="updatedAt" label="更新时间" />
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit( scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex_center m_t20">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="params.pageSize"
          @current-change="changePage"
        />
      </div>
    </div>

    <!-- 新增编辑标签 dialog -->
    <el-dialog
      title="标签"
      :visible.sync="visible"
      width="20%"
    >
      <el-form ref="tagForm" :model="tagForm" :rules="rules" label-width="120px">
        <el-form-item label="标签名称" prop="tagName"  >
          <el-input v-model="tagForm.tagName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="背景颜色" prop="bgColor"  >
           <el-color-picker v-model="tagForm.bgColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="文字颜色" prop="textColor"  >
           <el-color-picker v-model="tagForm.textColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="文字大小" prop="fontSize"  >
          <el-input v-model="tagForm.fontSize" placeholder="请输入文字大小" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTagList,setTag,delTag } from "@/api/tags"
export default {
  data() {
    return {
      tagForm: {
        tagName: null,
        bgColor: null,
        textColor: null,
        fontSize: null
      },
      total: 0,
      visible: false,
      tagdata: [],
      rules: {
        tagName: [
          { required: true, message: "请输入标签名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 8 个字符" }
        ],
        bgColor: [{ required: true, message: "请选择背景颜色", trigger: "blur" }],
        fontSize: [{ required: true, message: "请填写字体大小", trigger: "blur" }],
        textColor: [{ required: true, message: "请选择文字颜色", trigger: "blur" }]
      },
      params:{
        currentPage: 1,
        pageSize: 10
      }
    };
  },
  created() {
    this.getTagList();
  },
  methods: {
    async confirm() {
      this.$refs.tagForm.validate(async valid => {
        if (valid) {
          const result = await setTag(this.tagForm);
          this.$message({ message: result.msg, type: "success" });
          this.getTagList();
          this.resetForm()
          this.visible = false;
        }
      });
    },
    async getTagList() {
      const result = await getTagList(this.params);
      this.total = result.data.count;
      this.tagdata = result.data.rows.map(t => {
        t.createdAt = this.changeDate(t.createdAt);
        t.updatedAt = this.changeDate(t.updatedAt);
        return t;
      });
    },
    changePage(val){
      this.params.currentPage = val
      this.getTagList()
    },
    remove(row) {
      this.$confirm(`是否删除标签  "${row.tagName}"`, "提示", {
        confirmButtonText: "确定",cancelButtonText: "取消", type: "warning"
      }).then(async() => {
        await delTag({ id: row.id });
        this.$message({type: "success",message: `${row.tagName} 标签删除成功`});
        this.getTagList();
      });
    },
    add(){
      this.resetForm()
      this.visible = true;
    },
    edit(row) {
      const { tagName, bgColor, textColor, fontSize} = row
      Object.assign(this.tagForm, { tagName, bgColor, textColor, fontSize})
      this.visible = true;
    },
    resetForm(){
      Object.keys(this.tagForm).forEach(k => this.tagForm[k] = null)
    },
    /** 日期格式化 */
    changeDate(date) {
      var d = new Date(date);
      return (
        d.getFullYear() +
        "年" +
        "-" +
        (d.getMonth() + 1) +
        "月" +
        "-" +
        d.getDate() +
        "日"
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.table {
  margin-top: 30px;
}
.label{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 2px;
}
</style>
